<template>
  <tm-app>
    <!-- #ifndef H5 -->
    <tm-navbar
      :title="`${props.executor.metadata.funcName || '字段变更'}确认`"
    ></tm-navbar>
    <!-- #endif -->
    <view class="executor">
      <view class="executor-title">
        <tm-text
          :font-size="28"
          label="确认后，您的数据将自动产生变更操作，变更字段如下"
        />
      </view>
      <view
        style="width: 100%"
        v-for="(item, index) in executor.metadata.changes"
        :key="index"
      >
        <tm-card :title="item.name">
          <template #content>
            <view
              class="executor-confim"
              v-for="(field, i) in item.fieldChanges"
              :key="i"
            >
              <view class="confim-item">
                <tm-text label="序号" />
                <tm-text :label="i + 1" />
              </view>
              <view class="confim-item">
                <tm-text label="字段主键" />
                <tm-text :label="field.id" />
              </view>
              <view class="confim-item">
                <tm-text label="字段名称" />
                <tm-text :label="field.name" />
              </view>
              <view class="confim-item">
                <tm-text label="字段类型" />
                <tm-text :label="field.valueType" />
              </view>
              <view class="confim-item">
                <tm-text label="变动前值" />
                <tm-text :label="field.before" />
              </view>
              <view class="confim-item">
                <tm-text label="变动前名称" />
                <tm-text :label="field.beforeName" />
              </view>
              <view class="confim-item">
                <tm-text label="变动后值" />
                <tm-text :label="field.after" />
              </view>
              <view class="confim-item">
                <tm-text label="变动后名称" />
                <tm-text :label="field.afterName" />
              </view>
            </view>
          </template>
        </tm-card>
        <tm-button
          form-type="submit"
          label="确认"
          block
          @click="emits('confirm')"
        ></tm-button>
      </view>
    </view>
  </tm-app>
</template>
<script lang="ts" setup>
import { IExecutor } from '@/ts/core/work/executor'
/**
 * 字段变更执行器
 */
type Props = {
  executor: IExecutor
}
const props = defineProps<Props>()
const emits = defineEmits(['confirm'])
</script>
<style lang="scss" scoped>
.executor {
  padding: 20rpx 20rpx;
  .executor-title {
    width: 100%;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: center;
  }
  .executor-confim {
    width: 600rpx;
    margin-bottom: 12rpx;
    border-bottom: 1px solid #ccc;
    .confim-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 12rpx;
    }
  }
}
</style>
